
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。
这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。
注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<%@ include file="/common/jsp/bootstrap.jsp" %>
<%@ include file="/common/jsp/page.jsp" %>
<%@ include file="/common/jsp/validator.jsp" %>

<link href="${ctx}/common/bootstrapTree/css/bootstrap-treeview.css" rel="stylesheet">
<script src="${ctx}/common/bootstrapTree/js/bootstrap-treeview.js"></script>

<title>登陆页面</title>
</head>
<body>
 <section>
    <section class="wrapper">
    	<h3><i class="fa fa-angle-right"></i>角色管理</h3>
    	
    	<!-- 添加 -->
		<button type="button" id="addUserBtn" class="btn btn-success"  data-toggle="modal" data-target="#myModal">添加</button>
		<!-- 删除--> <!--data-toggle="modal" data-target="#myModal" -->
		<button type="button" id="updateUserBtn" class="btn btn-info">修改</button>
		<!-- 修改 -->
		<button type="button" id="delUserBtn" class="btn btn-warning">删除</button>
    	<div class="row mt">
                  <div class="col-md-12">
                      <div class="content-panel">
                          <table class="table table-striped table-advance table-hover">
	                  	  	  <h4>
	                  	  	  	<i class="fa fa-angle-right"></i>
	                  	  	  </h4>
	                  	  	  <hr>
                              <thead>
                              <tr>
                              	  <th><input type="checkbox"/></th>
                                  <th>ID</th>
                                  <th class="hidden-phone">角色名称</th> 
                                  <th>角色类型</th> 
                                  <th>创建时间</th> 
                                  <th>是否锁定</th> 
                                  <th>角色描述</th>
                              </tr>
                              </thead>
                              <tbody>
	                              <c:forEach var="role" items="${pageInfo.list}">     
		                              <tr>
		                              	  <td><input type="checkbox" value="${role.id}"/></td>
		                              	  <td>${role.id}</td>
		                                  <td class="hidden-phone">${role.roleName}</td>
		                                  <td>${role.roleType}</td>
		                                  <td>${role.timeStr}</td>
		                                  <td>
		                                  	<c:choose>
		                                  		<c:when test="${role.isLock == 2}">
		                                  			 正常
		                                  		</c:when>
		                                  		<c:otherwise>
		                                  			锁定
		                                  		</c:otherwise>
		                                  	</c:choose>
		                                  </td>
		                                  <td>${role.roleDescription}</td>
		                                  <td>
		                                      <button class="btn btn-primary btn-xs">删除</button>
		                                      <button title="${role.id}" class="btn btn-danger btn-xs rolePermission">角色权限</button> 
		                                  </td>
		                              </tr>
	                              </c:forEach>
                              </tbody>
                          </table>
						  <div>
						  	<ul id="callBackPager"></ul>
						  </div>		                          
                      </div>
                  </div>
              </div>
 	</section>
</section>

<!-- 模态框弹出页面 -->
<div>
	<div id="myModal" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">添加用户</h4>
	      </div>
	      <div class="modal-body">
		      <form id="defaultForm" target="mainframe" method="post" class="form-horizontal" action="${ctx}/role/addRole.do">
		      	<input type="hidden" name="id" id="userId"/>
	            <div class="form-group">
                      <label class="col-lg-3 control-label">角色名称</label> 
                      <div class="col-lg-5">   
                           <input type="tel" class="form-control" name="roleName" id="roleName"/>
                      </div>
                  </div> 
                  <div class="form-group">
                      <label class="col-lg-3 control-label">角色描述</label> 
                      <div class="col-lg-5">
                           <input type="tel" class="form-control" name="roleDescription" id="roleDescription"/>
                      </div>
                  </div>    
                  <div class="form-group">
                     <div class="col-lg-9 col-lg-offset-3">
                          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					      <button type="submit" class="btn btn-primary">保存</button>
					      <button type="button" class="btn btn-primary" id="resetBtn">重置</button>
                      </div>
                  </div>      
              </form>
	      </div>
	      <!-- <div class="modal-footer">
	        
	      </div> -->
	    </div>
	  </div>
	</div>
	
	<div id="alertMessage" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">温馨提示</h4>
	      </div>
	      <div class="modal-body">
	      	<label id="message"></label>
	      </div>
	      <div class="modal-footer">
	          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	
	<!-- 模板删除弹出框 -->
	<div id="deleteUser" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">确定删除选中的用户吗？</h4>
	      </div>
	      <div class="modal-footer">
		      <form id="deleteFrom" target="mainframe" style="display: none;" action="${ctx}/role/roleDel.do" method="post">
				 <input type="hidden" id="ids" name="ids"/>
			  </form>
	          <button type="button" id="delOk" class="btn btn-default">确定</button>
	          <button type="button" class="btn btn-default" data-dismiss="modal" >取消</button>
	      </div>
	    </div>
	  </div>
	</div>
</div>
<!-- 分页组建 -->
<form id="userPageForm" target="mainframe" style="display: none;" action="${ctx}/role/rolelist.do" method="post">
	<input type="hidden" id="currentPage" name="search_currentpage"/>
	<input type="hidden" id="pageSize" name="search_pageSize"/>
</form>



<!-- 角色权限设置框 -->
<div class="modal fade" id="rolePermissionModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">用户角色</h4>
      </div>
      <div class="modal-body">
	      <div style="float: left;width: 250px;">
	      <input type="hidden" id="roleId"/> 
			  角色 未拥有 权限
	        <select multiple id="permissionList" style="height: 160px;width: 150px;" class="form-control">
			  
			</select>
			<div style="position: absolute;top:100px;left: 180px; ">
			 <button type="button" id="remove" class="btn btn-default">《==</button><br>
			 <button type="button" id="add" class="btn btn-default">==》</button>
			</div>
		</div> 
		<div>
			角色 拥有 权限
			<select multiple id="rolePermission" style="height: 160px;width: 150px;" class="form-control">
			  
			</select>
			
		</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="saveRolePermisson" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>
<script type="text/javascript">
	$(function(){
		var removePermission;
		var addPermission;
		
		//用户点击移除用户权限
		$("#remove").click(function(){
			var permissionList = $("#rolePermission").val(); 
			for(var i = 0 ;i < permissionList.length ; i++ ){
				var value = permissionList[i];
				var text = $("#rolePermission option[value='"+value+"']").text();
				$("#permissionList").append("<option value='"+value+"'>"+text+"</option>");
				$("#rolePermission option[value='"+value+"']").remove();
			}
		});
		//用户点击添加
		$("#add").click(function(){
			var rolePermission = $("#permissionList").val();
			for(var i = 0 ;i < rolePermission.length ; i++ ){
				var value = rolePermission[i];
				var text = $("#permissionList option[value='"+value+"']").text();
				$("#rolePermission").append("<option value='"+value+"'>"+text+"</option>");
				$("#permissionList option[value='"+value+"']").remove();
			}
		});
		
		
		//角色权限按钮
		$(".rolePermission").click(function(){
			var roleId = $(this).attr("title");
			getRolePermission(roleId);
		});
		
		debugger;
        $('#callBackPager').bootstrapPaginator({
        	bootstrapMajorVersion:3,
            currentPage: '${pageInfo.pageNum}',
            numberOfPages:"${pageInfo.pageSize}",
            totalPages:"${pageInfo.pages}",
            onPageClicked:function(event, originalEvent, type, page) 	{
            	$("#currentPage").val(page);
                $("#pageSize").val(10);
                $("#userPageForm").submit();
            }
        });

        $('#defaultForm').bootstrapValidator({
//          live: 'disabled',
          message: 'This value is not valid',
          feedbackIcons: {
              valid: 'glyphicon glyphicon-ok',
              invalid: 'glyphicon glyphicon-remove',
              validating: 'glyphicon glyphicon-refresh'
          },
          fields: { //        
        	  roleName: { 
                  validators: {
                      notEmpty: {
                          message: '角色不能为空'
                      }
                  }
              },
              roleDescription: {
                  validators: {
                	  notEmpty: {
                          message: '角色描述'
                      }
                  }
              }
          }
      });
        
	 /*  $('#saveUser').click(function() {//与提交按钮有相同的效果
		  debugger;
	     var rst = $('#defaultForm').bootstrapValidator('validate');
	  }); */

      $('#resetBtn').click(function() {//重置表单
         $('#defaultForm').data('bootstrapValidator').resetForm(true);
      });
	  
	  //用户点击添加按钮
	  $("#addUserBtn").click(function(){
		  //重置表单中的信息
		  $('#defaultForm').data('bootstrapValidator').resetForm(true);
	  });
	  
	  //用户点击修改按钮
	  $("#updateUserBtn").click(function(){
		  var checkboxs =$(".table").find("input[type=checkbox]:checked");
		  if(checkboxs.length != 1){
			  $("#message").html("请选择一项您需要修改的角色！");
			  $("#alertMessage").modal('show');
			  return;
		  }
		  //查询 用户信息
		  getRoleInfo(checkboxs[0].value);
		  $("#myModal").modal('show');
	  });
	  
	  //用户点击删除按钮
	  $("#delUserBtn").click(function(){
		  var checkboxs = $(".table").find("input[type=checkbox]");
		  var isCheckedBox = "";
		  for(var i= 0 ; i < checkboxs.length ;i ++){
			  var checkbox = checkboxs[i];
			  if(checkbox.checked){//选中 的
				  if(isCheckedBox == ""){
					  isCheckedBox = checkbox.value;
				  }else{
					  isCheckedBox += ","+checkbox.value;
				  }
			  }
		  }
		  if(isCheckedBox == "" ){
		      $("#message").html("您还未选择需要删除的数据！");
		      $("#alertMessage").modal('show');
		      return;
	      }
		  $("#ids").val(isCheckedBox);
		  $("#deleteUser").modal('show');
		
	  });
	  
	  //删除确定按钮
	  $("#delOk").click(function(){
		  //和后台进行数据交互删除数据
		  $("#deleteFrom").submit();
	  });
	  
	  //点击保存角色权限
	  $("#saveRolePermisson").click(function(){
		  debugger;
		  var rolePermission = $("#rolePermission option");
		  var permissionIds = "";//用户拥有的所有 权限
		  for(var i = 0 ; i < rolePermission.length; i++){
			 var option = rolePermission[i];
			 if(permissionIds == ""){
				 permissionIds +=option.value;	 
			 }else{
				 permissionIds += ","+option.value;
			}
		  }
		  var roleId = $("#roleId").val();
		  saveRolePermission(permissionIds,roleId);
	  });
	  
	  //获取角色信息
	  function  getRoleInfo(roleId) {
		  $.ajax({
				url:"${ctx}/role/getRoleInfo.do",
				type:"post",
				data:{"roleId":roleId},
				aysnc:"false",
				success:function(data){
					debugger;
					var code = data.code;
					if(code == 200){
						var role = data.role;
						$("#roleName").val(role.roleName);   
						$("#roleDescription").val(role.roleDescription);
					}else{
						$("#message").html("获取用户信息失败");
						$("#alertMessage").modal('show');
					}
				}
			});
	  }
});
	
	function getRolePermission(roleId){
		$.ajax({
			url:"${ctx}/role/getRolePermission.do",
			type:"post",
			data:{"roleId":roleId},
			aysnc:"false",
			success:function(data){  
				var rolePermissions = data.rolePermissions;
				var permissionList = data.permissionList;
				//rolePermission permissionList
				var rolePermissionStr="";
				for(var i = 0 ; i < rolePermissions.length ; i++){
					var rolePermission = rolePermissions[i];
					rolePermissionStr +="<option value='"+rolePermission.id+"'>"+rolePermission.permissionName+"</option>";
				}
				var permissionListStr="";
				for(var i = 0 ; i < permissionList.length ; i++){
					var permission = permissionList[i];
					 permissionListStr +="<option value='"+permission.id+"'>"+permission.permissionName+"</option>";;
				}
				$("#rolePermission").html(rolePermissionStr);
				$("#permissionList").html(permissionListStr);
				$("#roleId").val(roleId);
				$("#rolePermissionModal").modal('show');
			}
		});
	}
	
	//保存角色权限
	function saveRolePermission(permissionIds,roleId){
		$.ajax({
			url:"${ctx}/role/saveRolePermission.do",
			type:"post",
			data:{"permissionIds":permissionIds,"roleId":roleId},
			aysnc:"false",
			success:function(data){
				var code = data.code;
				$("#rolePermissionModal").modal('hide');
				if(code == "200"){
					$("#alertMessage").modal('show');
					$("#message").html("角色授权成功！");
				}else{
					$("#alertMessage").modal('show');
					$("#message").html("角色授权失败！");
				}
			}
		});
	}
	
</script>
